<template>
  <el-dialog
    title="预警处理"
    :close-on-click-modal="false"
    width="540px"
    :visible.sync="visible">

    <el-form
      label-position="right"
      :model="dataForm"
      :rules="rules"
      ref="dataForm"
      label-width="80px">

      <el-form-item label="序列号" prop="recordNum">
        <el-input placeholder="序列号" v-model="dataForm.recordNum" clearable></el-input>
      </el-form-item>
      <el-form-item label="集装箱号" prop="dealRecordNo">
        <span>{{dataForm.dealRecordNo}}</span>
      </el-form-item>
      <el-form-item label="类型" prop="recordType">
        <el-select placeholder="类型" v-model="dataForm.recordType" clearable style="width: 100%;">
          <el-option label="租用" value="1"></el-option>
          <el-option label="自用" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="营运人" prop="manager">
        <el-input placeholder="营运人" v-model="dataForm.manager" clearable></el-input>
      </el-form-item>
      <el-form-item label="承运人" prop="carrier">
        <el-input placeholder="承运人" v-model="dataForm.carrier" clearable></el-input>
      </el-form-item>
      <el-form-item label="异常情况" prop="abnormaldes">
        <el-input placeholder="异常情况" v-model="dataForm.abnormaldes" clearable></el-input>
      </el-form-item>
      <el-form-item label="处理意见" prop="dealType">
        <el-select
          placeholder="处理意见"
          v-model="dataForm.dealType"
          clearable
          @change="selectChange"
          style="width: 100%; padding-bottom: 10px;">
          <el-option label="查货正常，进口货物责令退运，集装箱进行船级社登记备案" value="1"></el-option>
          <el-option label="查货正常，出口货物退场处理，集装箱进行船级社登记备案" value="2"></el-option>
          <el-option label="查货不正常，集装箱和货物全部转交缉私警察" value="3"></el-option>
          <el-option label="录入错误" value="8"></el-option>
          <el-option label="其他" value="9"></el-option>
        </el-select>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="处理意见"
          v-show="showFlag"
          maxlength="60"
          v-model="dataForm.dealDetail">
        </el-input>
        <div v-show="showFlag" style="text-align: right;">{{count}} / 60</div>
      </el-form-item>
      <el-form-item label="处理人">
        {{name}}
      </el-form-item>
      <el-form-item label="处理时间">
        {{new Date() | parseTime('{y}-{m}-{d}')}}
      </el-form-item>
    </el-form>


    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  // api
  import {update} from '@/api/storageWarning'
  // utils
  import {parseTime} from '@/utils'
  // vuex
  import {mapGetters} from 'vuex'

  export default {
    name: 'warning-handle',
    data() {
      return {
        dataForm: {
          recordNum: '',
          dealRecordNo: '',
          recordType: '',
          manager: '',
          carrier: '',
          abnormaldes: '',
          dealType: '',
          dealDetail: '',
          id: ''
        },
        rules: {
          abnormaldes: [
            {required: true, message: '请输入处理情况', trigger: 'blur'}
          ],
          dealType: [
            {required: true, message: '请输入处理意见', trigger: 'change'}
          ],
          dealDetail: [
            {required: true, message: '请输入处理意见', trigger: 'blur'}
          ]
        },
        showFlag: false,
        visible: false
      }
    },
    computed: {
      count() {
        return this.dataForm.dealDetail.length
      },
      ...mapGetters([
        'currentId',
        'name'
      ])
    },
    methods: {
      init() {
        console.log(this.currentId)
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.dataForm.dealRecordNo = this.currentId.dealRecordNo
          this.dataForm.id = this.currentId.id
          this.dataForm.recordSource = this.currentId.recordSource
        })
      },
      selectChange(val) {
        if (val === '9') {
          this.showFlag = true
        } else {
          this.showFlag = false
        }
      },
      submitForm() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            update(this.dataForm).then((res) => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.visible = false
              this.$emit('refresh')
            })
          } else {
            return false
          }
        })
      },
      close() {
        this.visible = false
        this.$refs['dataForm'].resetFields()
      },
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">

</style>
